<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/fontawesome-free-5.7.2-web/css/all.css">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../css/jquery.mobile.ui.css">
    <link rel="stylesheet" href="../css/jqm-ui-demos.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js"></script>
    <script type="text/javascript" src="../js/bscroll.js"></script>
  </head>
  <body>

    <div data-role="page" data-theme="a" style="height: 100%!important;">
      <div data-role="header" class="navbar" data-position="fixed" data-tap-toggle="false">
          <div class="nav">
              <a data-role="none" data-ajax="false" href="../menus.html" class="nav-link"><i class="fas fa-chevron-left"></i> 首页</a>
              <h3 class="nav-title">Tab</h3>
          </div>
          <ul class="tab-list">
            <li class="tab-item active"><a data-role="none" href="javascript:;">页面1</a></li>
            <li class="tab-item"><a data-role="none" href="javascript:;">页面2</a></li>
            <li class="tab-item"><a data-role="none" href="javascript:;">页面3</a></li>
          </ul>
      </div>
      <div role="main" class="">
          
        <div class="slide pages" style="width: 375px;">
          <div class="slide-group">
            <div class="slide-item" id="page1">
                <div class="scroll-wrapper" >
                  <div class="scroll-content"></div>
                </div>
            </div>
            <div class="slide-item" id="page2">
              <div class="scroll-wrapper" >
                <div class="scroll-content" ></div>
              </div>
            </div>
            <div class="slide-item" id="page3">
                <div class="scroll-wrapper">
                  <div class="scroll-content"></div>
                </div>
            </div>
          </div>
        </div>
        
      </div>
      <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <nav class="tab-bar">
          <a data-role="none" class="bar-item">
            <span class="icon"><i class="icon fal fa-home-lg-alt"></i></span>
            <span class="text">首页</span>
          </a>
          <a data-role="none" class="bar-item active new">
            <span class="icon"><i class="icon fas fa-comment"></i></span>
            <span class="text">消息</span>
          </a>
          <a data-role="none" class="bar-item new">
            <span class="icon"><i class="icon fal fa-calendar-check"></i></span>
            <span class="text">待办</span>
          </a>
          <a data-role="none" class="bar-item">
            <span class="icon">
              <i class="icon fal fa-user"></i>
            </span>
            <span class="text">我</span>
          </a>
        </nav>
      </div>
    </div>

    <script type="text/javascript">

      var bScroll;
      $('[data-role=page]').on({
        pagecreate: function(){

          // 底部tab bar表现
          $('.tab-bar .bar-item').on('click', function(){
            $(this).addClass('active')
              .find('i').removeClass('fal').addClass('fas')
              .end()
              .siblings('.bar-item').removeClass('active')
              .find('i').removeClass('fas').addClass('fal')
          });

          $('.tab-list .tab-item').on('click', function(){
            $(this).addClass('active').siblings('.tab-item').removeClass('active');
            bScroll.goToPage($(this).index());
          });

          

        },
        pageshow: function(){
          
          var bh = $('body').height(),
              hh = $('[data-role=header]').height(),
              fh = $('[data-role=footer]').height();
          $('.scroll-wrapper').css('height', bh - hh - fh);

          // 滚动
        
          var $slide = $('.slide'),
              width = $slide.width(),
              $group = $slide.find('.slide-group'),
              $items = $group.find('.slide-item');
          $group.css('width', width * $items.length);
          $items.css('width', width);

          bScroll = new BScroll($slide[0], {
              scrollX: true,
              scrollY: false,
              bounce: false,
              
              snap: {
                speed: 400,
                threshold: .8,
                stepX: width,
              }
          });

          
          bScroll.on('scrollEnd', function(){
            var page = this.getCurrentPage();
            $('.tab-list .tab-item:eq('+ page.pageX +')').addClass('active').siblings('.tab-item').removeClass('active');
            loadPage(this);
          });
          // loadPage(bScroll);



          $('.scroll-wrapper').each(function(){
            var bs = new BScroll(this, {
                scrollX: false,
                scrollY: true,
                bounce: true,
                tap: true,
                click: true,
            });
          });
        }
      });

      function loadPage(bs){
        // 加载页面
        var page = bs.getCurrentPage();
        var $scroller = $(bs.scroller),
            $slideItem = $scroller.find('.slide-item:eq('+ page.pageX +')'),
            $pageContent = $slideItem.find('.scroll-content');
        if($pageContent.is(':empty')){
          $pageContent.html('<i class="icon-loading"></i>');
          $pageContent.load('pages/' + $slideItem.attr('id') + '.html', function(){

          });
        }
      }
      
      // 加载页面
      /* 不在这里加载了，滚动到什么页面加载什么内容
      $('.pages .slide-item').each(function(){
        $(this).find('.scroll-content').load('pages/' + $(this).attr('id') + '.html');
      });
      */

      
    </script>

  </body>
</html>